<template>
  <div class="">
    <div class="mask" @click="close()"></div>
    <div class="paymodal codemodal" v-if="payStep === 1">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">关闭</a>
      </div>
      <div class="modal_body">
        <div class="tip" v-if="order.payType === 1">支付宝支付 {{this.order.shouldPay}}元</div>
        <div class="tip" v-else>微信支付 {{this.order.shouldPay}}元</div>
        <div class="code" id="qrcode">
          <canvas id="canvas222"></canvas>
        </div>
        <p class="tip2" v-if="order.payType === 2">请使用支付宝扫描二维码支付以完成订单</p>
        <p class="tip2" v-else>请使用微信扫描二维码支付以完成订单</p>
        <div class="finish_pay" @click="getOrderInfoSelf">完成支付如果页面没有跳转请点击此处</div>
        <div class="tip_panel">
          提示: <br>
          支付成功前请不要手动关闭页面<br>
          二维码两个小时内有效,请及时扫码支付，否则订单将被取消。<span style="color: red">最后支付时间{{order.lastDateForPayment}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import {orderMainSave,checkPayResult} from '~/api/order.js'
    import  {continuePay} from '~/api/account/course.js'
    import VueCookie from 'vue-cookie'


    import QRCode from 'qrcode'
    export default {
        props: {
            data: {
                type: [Object, Array],
                default: null
            },
            orderNo: {
                type: String,
                default: ''
            },
            isCourse: {
                type: Boolean
            }
        },
        data () {
            return {
                studyCardList: [],
                couponList: [],
                studyCardSize: '',
                couponSize: '',
                isVip: false,
                btntext: '下一步',
                checkPay: false,
                userInfo: [],
                courseData: '',
                order: {
                    courseId: 0,
                    payType: 0,
                    shouldPay: 0,
                    remark: '',
                    cardId: '',//如果cardType是学习卡，就是学习卡ID，如果cardType是优惠券，就是优惠券ID
                    cardType: '',//选择学习卡为1，选择优惠券为2
                    orderNo: '',
                    lastDateForPayment: '' //最后支付期限
                },
                orderInfo: {
                    payType: 1
                },
                payStep: 1,
                player: null,
                selectedId: '',
                isOpenZfbPc: 0,
                isOpenWeixinpayPc: 0

            }
        },
        filters: {
            cutTile(value) {
                if (!value) return ''
                if (value.length > 14) {
                    return value.slice(0, 14) + '...'
                }
                return value
            },
            costTimeTypeChange(value){
                //计费类型，0代表长期，1按天，2按周(7天)，3按月(30天)，4按年(365天)
                if(value===0){
                    return "";
                }else if(value===1){
                    return "/天";
                }else if(value===2){
                    return "/周";
                }else if(value===3){
                    return "/月";
                }else if(value===4){
                    return "/年";
                }else{
                    return "";
                }
            },
            toFixed2(value){
                if(typeof(value)=='undefined'){
                    return '数据错误，请重新尝试';
                }
                return Number(value.toFixed(2));
            }
        },

        mounted () {
            this.userInfo = JSON.parse(VueCookie.get("wangxinUserInfo"));
            // this.qrcode('weixin://wxpay/bizpayurl?pr=GlkCzqF');
            /*
            this.order.courseId = this.data.course.id;
            this.courseData = this.data.course;
            console.log(this.courseData)
            this.getStudyCardList();
            this.getCouponUserList();
            this.getSystemConfig();

            this.order.shouldPay = this.toFixed22(this.courseData.courseDiscount);
            */

            this.continuePay();
            this.checkPayResult();
        },
        methods: {
            toFixed22(value){
                if(typeof(value)=='undefined'){
                    this.$msgBox({
                        content: '请等待页面数据加载完整再点击购买按钮',
                        isShowCancelBtn: false
                    }).then(() => {

                    }).catch(() => {
                    })
                    return;
                }
                return Number(value.toFixed(2));
            },
            setPayType(payType){
                this.order.payType = payType;
            },

            //是否过期
            isOutDate(endDate){
                let endDateTime = new Date(endDate).getTime();
                let nowTime = new Date().getTime();
                if(nowTime>endDateTime){
                    return true;
                }else{
                    return false;
                }
            },


            reload () {
                window.location.reload();
            },
            close (event) {
                this.checkPay = true;
                this.$emit('hidefun', event);
            },
            sel (cno) {
                this.checkPay = true;
                this.$emit('btnClick', cno)
            },
            qrcode2 (url) {
                console.log("ddd-------");
                let canvas222 = document.getElementById('canvas222');
                QRCode.toCanvas(canvas222, url, {
                    width: 180,
                    height: 180
                }, function (error) {
                    if (error) {
                        console.error(error);
                    }else {
                        console.log('success!')
                    }
                })
            },
            startView () {

            },
            submitOrderWarn(){
                console.log("支付类型："+this.orderInfo.payType);
                this.$msgBox({
                    content: "确定提交订单吗？",
                    isShowCancelBtn: true
                }).then(() => {
                    this.submit();
                }).catch(() => {})
            },
            continuePay () {
                let that = this;
                console.log("订单内容："+JSON.stringify(this.order));
                /*
                if(parseFloat(that.order.shouldPay) > 0){
                    if(that.order.payType === 0){
                        this.$msgBox({
                            content: '必须选择支付方式',
                            isShowCancelBtn: false
                        })
                        return;
                    }
                }*/

                this.payStep = 1;
                // if(1===1) {
                //     setTimeout(function () {
                //        that.qrcode2('66777');
                //   }, 1000);
                //   return;
                // }
                that.btntext = '正在提交...';

                console.log("orderNo:"+that.orderNo);

                continuePay({'orderNo':that.orderNo}).then(res => {
                    res = res.data;
                    console.log(res)
                    that.btntext = '下一步';
                    if (res.code === 200) {
                        setTimeout(function () {
                            that.qrcode2(res.data.qrCode);
                        }, 200);
                        this.order.shouldPay = res.data.payAmount;
                        this.order.payType = res.data.payType;
                        //this.order.orderNo = res.data.orderNo;
                        this.order.lastDateForPayment = res.data.lastDateForPayment;
                        that.checkPayResult(res.data.orderNo);
                    } else if (res.code >= 300 && res.code < 400) {
                        this.$msgBox({
                            content: res.msg,
                            isShowCancelBtn: false
                        }).then(() => {
                            this.$store.dispatch('REDIRECT_LOGIN');
                        }).catch(() => {})
                    } else {
                        this.$msgBox({
                            content: res.msg,
                            isShowCancelBtn: false
                        }).then(() => {
                        }).catch(() => {});
                        this.close();

                    }
                }).catch(() => {
                    this.$msgBox({
                        content: '提交失败,请重试',
                        isShowCancelBtn: false
                    })
                    that.btntext = '重新提交';
                })
            },
            checkPayResult () {
                let that = this;
                if (this.checkPay) {
                    return false;
                }
                checkPayResult({orderNo: this.orderNo}).then(res => {
                    res = res.data
                    console.log(res)
                    if (res.data.payStatus === 0) {
                        setTimeout(function () {
                            that.checkPayResult(this.orderNo);
                        }, 2000);
                    } else if (res.data.payStatus === 1) {
                        this.close();
                        this.$msgBox({
                            content: '购买成功',
                            isShowCancelBtn: false
                        }).then(res => {
                            window.location.reload();
                        }).catch(() => {
                            window.location.reload();
                        })
                    } else {
                        that.payStep = 2;
                    }
                })
            },
            getOrderInfoSelf () {//手动点击完成支付
                let that = this;

                if (this.checkPay) {
                    return false;
                }
                checkPayResult({orderNo: that.orderNo}).then(res => {
                    res = res.data
                    console.log(res)
                    if (res.data.payStatus === 0) {
                        this.$msgBox({
                            content: '尚未完成支付',
                            isShowCancelBtn: false
                        }).then(res => {
                        }).catch(() => {
                        })
                        return;
                    } else if (res.data.payStatus === 1) {
                        this.close();
                        this.$msgBox({
                            content: '购买成功',
                            isShowCancelBtn: false
                        }).then(res => {
                            window.location.reload();
                        }).catch(() => {
                            window.location.reload();
                        })
                    } else {
                        that.payStep = 2;
                    }
                })
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .payrun{
    min-height: 180px;
    .modal_body{
      padding: 30px;
      //height: 180px;
    }
    .ewm_img {
      width: 130px;
      display: block;
      margin: 10px auto 0;
      text-align: center;
      img {
        width: 130px;
        height: 130px;
      }
      p {
        line-height: 20px;
      }
    }
    .icon{
      font-size: 80px;
      width: 80px;
      margin: 0 auto;
      text-align: center;
      &.minIcon {
        font-size: 26px;
        width: 160px;
        span {
          position: relative;
          top: -5px;
          padding-left: 6px;
        }
      }
    }
    .order_btn {
      background: #fff;
      border: 1px solid rgb(180, 180, 180);
      color: #999;
      text-decoration: none;
      margin: 30px 5px;
    }
    .tip{
      font-size: 16px;
      text-align: center;
      padding-bottom: 20px;
    }
    .c_green{
      color: #05d005;
    }
  }
  .codemodal{
    .tip{
      margin: 30px auto 0;
      text-align: center;
      font-size: 16px;
    }
    .code{
      width: 182px;
      height: 182px;
      border: 1px solid #ddd;
      margin: 20px auto;
    }
    .tip2{
      margin: 0 auto;
      width: 380px;
      padding: 13px 0 13px 70px;
      height: 40px;
      line-height: 20px;
      font-size: 14px;
      color: black;
      background-color: lightskyblue;
    }
    .finish_pay{
      margin: 10px auto;
      width: 380px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      color: black;
      text-align: center;
      cursor:pointer;
      text-decoration:underline;
      background-color: greenyellow;
    }
    .tip_panel{
      margin-top: 20px;
      padding: 20px;
      line-height: 20px;
      border-top: 1px solid #f1f1f1;
    }
  }
  .paymodal{
    position: fixed;
    left: 50%;
    top: 10%;
    z-index: 999;
    width: 720px;
    margin-left: -240px;
    background-color: #fff;
    border-radius: 0px;
    height: 500px;
    overflow: scroll;
    .modal_head{
      line-height: 46px;
      background-color: #f9f9f9;
      text-align: right;
      padding: 0 20px;
      .close{
        font-size: 14px;
      }
    }
    .modal_foot{
      border-top: 1px solid #e7e7eb;
      padding: 20px;
      text-align: center;
    }
    .table{
      width: 100%;
    }
    th{
      line-height: 36px;
      background-color: #f8f8f8;
    }
    td{
      vertical-align: middle;
      padding: 20px;
    }
    .name{
      width: 140px;
      padding-left: 12px;
      font-size: 16px;
    }
    .img{
      display: inline-block;
      width: 120px;
      padding: 0;
    }
    .name{
      display: inline-block;
      vertical-align: top;
    }
    .tabs {
      height: 48px;
      .tab{
        float: left;
        line-height: 46px;
        text-align: center;
        font-size: 16px;
        width: 50%;
      }
      span{
        cursor: default;
        display: inline-block;
        line-height: 46px;
      }
      .on{
        color: #ee7e00;
        span{
          border-bottom: 2px solid #ee7e00;
        }
      }
    }
    .remark{
      padding: 20px;
      overflow: hidden;
      font-size: 14px;
      border-top: 1px solid #f1f1f1;
      input{
        text-indent: .5em;
        height: 22px;
        width: 350px;
        border: none;
      }
    }
    .should_pay{
      padding: 20px;
      overflow: hidden;
      border-top: 1px solid #f1f1f1;
    }
    .pay_type{
      padding: 20px;
      overflow: hidden;
      border-top: 1px solid #f1f1f1;
      input{
        display: none;
        &:checked + .pay{
          border-color: blue;
        }
      }
    }
    .coupon_type{//优惠券
      padding: 20px;
      overflow: hidden;
      border-top: 1px solid #f1f1f1;
      input {
        display: none;
      }
      /*
      input{
        display: none;
        &:checked + .coupon_detail{
          border-color: blue;
        }
      }*/
    }
    .coupon_detail{
      width: 320px;
      height: 93px;
      border: 5px solid #fff;
      font-weight: bold;
      float: left;
      line-height: 20px;
      text-align: center;
      background-repeat: no-repeat;
      background-position: center center;
      background-color: lightskyblue;
    }
    .study_card_type{//学习卡
      padding: 20px;
      overflow: hidden;
      border-top: 1px solid #f1f1f1;
      input{
        display: none;
        /*
        &:checked + .study_card_detail{
          border-color: blue;
        }*/
      }
    }
    .study_card_detail{
      width: 320px;
      height: 93px;
      border: 5px solid #fff;
      font-weight: bold;
      float: left;
      line-height: 20px;
      text-align: center;
      background-repeat: no-repeat;
      background-position: center center;
      background-color: lightblue;
    }
    .pay{
      width: 218px;
      height: 50px;
      border: 1px solid #fff;
      float: left;
      background-repeat: no-repeat;
      background-position: center center;
      &.pay_ali {
        background-image: url();
      }
      &.pay_weixin {
        background-image: url();
      }
    }
  }
  //paymodal强制显示滚动条开始-----
  .modal_body::-webkit-scrollbar {
    width: 6px;
    height: 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .modal_body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    min-height: 28px;
  }
  .modal_body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  //paymodal强制显示滚动条结束-----
</style>
